<template>
    <div style="position: relative;">
        <table>
            <thead>
                <tr>
                    <th>零部件名称</th>

                    <th>解决方案</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v, i) in tableList" :key="i">
                    <td :style="{ 'width': '650px' }">{{ v.workpieceName }}</td>
                    <td>
                        {{ v.description }}
                    </td>

                    <td :style="{ 'text-align': 'center', 'width': '130px', 'line-height': '40px' }">
                        <span class="span" style="cursor: pointer" @click="editFun(v)"
                            v-if="v.description || v.workpieceName">编辑</span>
                        <span class="span" style="cursor: pointer" @click="DelFun(v)"
                            v-if="v.description || v.workpieceName">删除</span>
                    </td>
                </tr>

            </tbody>
        </table>
        <!-- 删除弹框 -->
        <div v-show="isbool" style="position: absolute;top: 30%; left: 30%;">
            <determineBox @delBtnFun="delBtnFun" @oneDelBtnFun="oneDelBtnFun" @errorBtnFun="errorBtnFun" />
        </div>
    </div>
</template>
<script>
import { GetDelPlanById } from "@/api/fulitModelApi/index.js"
export default {
    props: ["tableList"],
    components: {

        determineBox: () => import("@/components/determine/index.vue")
    },
    data() {
        return {
            isbool: false,
            exceptId: "",
            isbool: false,
            planId: ""
        }
    },
    mounted() {
        console.log(this.tableList, 2222);
    },
    methods: {

        //显示编辑弹框
        editFun(item) {
            this.$emit("editItem", item)
        },
        //删除
        DelFun(item) {
            this.isbool = true;
            this.planId = item.planId;
        },
        // 取消删除弹框
        oneDelBtnFun() {
            this.isbool = false;
        },
        // 删除弹框错误按钮
        errorBtnFun() {
            this.isbool = false;

        },
        // 删除请求
        delBtnFun() {
            GetDelPlanById({
                planId: this.planId
            }).then(res => {
                console.log(res);
                if (res.code = 200) {
                    this.$emit("delTableFun")
                    this.isbool = false;

                } else {
                    this.emit('errorFun', res)
                }

            })
        }
    },
}
</script>
<style lang="less" scoped>
.el-pagination {

    .btn-next,
    .btn-prev {
        border: 0px !important;
    }

}

table {
    width: 100%;
    background: linear-gradient(60deg, #021130 0%, #010D2A 100%);
    opacity: 1;
    color: white;
    border-collapse: collapse;
    font-size: 10px;

    thead {
        width: 1572px;
        color: white;


        tr {
            height: 40px;
            color: white;
            font-size: 13px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            line-height: 40px;
            color: #FFFFFF;
            background: rgba(11, 111, 189, 0.48);

            th {
                text-align: left;
                border: 0.01333rem solid rgba(4, 123, 181, 0.52);
                color: white;
                width: 30%;
            }
        }

    }

    tbody {
        width: 1572px;
        color: white;

        tr {
            height: 44px !important;
            border: 0.01333rem solid rgba(4, 123, 181, 0.52);

            td {
                color: white;
                border: 0.01333rem solid rgba(4, 123, 181, 0.52);
                font-size: 14px;
                font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                font-weight: 400;
                line-height: 40px;

                padding-left: 10px;
                text-align: left;

                span {
                    display: inline-block;
                    text-align: center;
                    padding: 10px;

                }

            }
        }

        tr:nth-child(even) {
            background: rgba(11, 111, 189, 0.22) !important;


            td {
                color: white;
            }
        }

    }

}

.look_play {
    display: flex;
    align-items: center;
    border: 0px;
    height: 100%;
    position: relative;


    .zzc {
        width: 465px;
        height: 188px;
        box-shadow: 10px 7px 32px 7px #011A41;
        position: absolute;
        top: 40px;
        left: 44px;
        background: linear-gradient(360deg, #021130 0%, #010D2A 100%);
        opacity: 1;
        border: 1px solid #00469C;

        div {
            width: 100%;
            height: 40px;
        }

    }

    .left {
        flex: 1;
        font-size: 14px;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        padding-left: 10px;
        line-height: 56px;

        img {
            width: 16px;
            height: 11px;
            margin: 10px 5px 3px 20px;
        }
    }

    .right {
        img {
            width: 19.44px;
            margin: 10px 0px;

        }
    }
}
</style>